import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import {
  RankTitle
} from './style';
import SongSheet from '../../components/songSheet';
class Rank extends PureComponent {
  render () {
    const { featureList, globalList } = this.props
    return (
      <div className="container">
        <div className="module">
          <RankTitle className="flex-row">云音乐特色榜</RankTitle>
          <SongSheet sheets={featureList}></SongSheet>
        </div>
        <div className="module">
          <RankTitle className="flex-row">全球媒体榜</RankTitle>
          <SongSheet sheets={globalList}></SongSheet>
        </div>
      </div>
    )
  }

  componentDidMount () {
    this.props.getRanks()
  }
}

const mapState = (state) => {
  return {
    featureList: state.getIn(['rank', 'featureList']),
    globalList: state.getIn(['rank', 'globalList']),
  }
}

const mapDispatch = (dispatch) => {
  return {
    getRanks() {
      const action = actionCreators.getRanks();
      dispatch(action);
    },
  }
}

export default connect(mapState, mapDispatch)(Rank);